<template>
  <div class="main">
    <el-icon class="icon" :class="{ jump: isHover }" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
      <House @click="router.push('/')"></House>
    </el-icon>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElIcon, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import 'element-plus/dist/index.css'
import { House } from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router";
const router = useRouter()
const isHover = ref(false)
const dropdownVisible = ref(false)
const handleMouseEnter = () => {
  isHover.value = true
  dropdownVisible.value = true
}

const handleMouseLeave = () => {
  isHover.value = false
  // 延迟关闭下拉框，以便用户可以移动到下拉菜单上
  setTimeout(() => {
    if (!isHover.value) {
      dropdownVisible.value = false
    }
  }, 200)
}
const props = defineProps({
  iconColor: {
    type: String,
    default: '', // 默认颜色为白色
  }
});
const handleCommand = (command) => {
  console.log(command)
}
</script>

<style scoped>
.main {
  margin: 5px;
}

.iconfont {
  border: none;
  transition: transform 0.2s ease-in-out;
  /* 添加过渡效果 */
}

.jump {
  border: none;
  animation: jumpAnimation 0.5s ease 1 !important;
  /* 添加跳动动画 */
}

@keyframes jumpAnimation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
    /* 向上跳动 */
  }

  100% {
    transform: translateY(0);
  }
}

.custom-dropdown-menu {
  box-shadow: none !important;
  /* 移除阴影 */
  padding: 0;
  border: none;
}

.icon {
  font-size: 30px;
  cursor: pointer;
  border: none;
  color: v-bind(iconColor);
}
</style>